<script setup>
import {useRoute, useRouter} from "vue-router";
import TumorMarker from "@/views/keyan/patientInfo/tumorMarker.vue";
import Question from "@/views/keyan/step/question.vue";
import Releationship from "@/views/keyan/step/releationship.vue";
import Followup from "@/views/keyan/followup/index.vue";
import {getPatient, updatePatient, updatePatientZlbzw} from "@/api/keyan/patient.js";

const route = useRoute();
const activeName = ref("1");
const patientId = ref("");
const {proxy} = getCurrentInstance();
const router = useRouter();
const isBeginEdit = ref(false);
const {ky_yw, ky_jcjb, ky_hrjgl, ky_sf, ky_yjqk, ky_yyxjg, ky_xys, ky_jcjg, sys_user_sex} =
    proxy.useDict("ky_yw", "ky_jcjb", "ky_hrjgl", "ky_sf", "ky_yjqk", "ky_yyxjg", "ky_xys", "ky_jcjg", "sys_user_sex");
const form = ref({
  tysId: "",
});
const rules = {
  patientName: [{required: true, message: "请输入参与者姓名", trigger: "blur"}],
  phone: [{required: true, message: "请输入联系电话", trigger: "blur"}],
  wxysdj: [{required: true, message: "请选择性别", trigger: "blur"}],
  age: [{required: true, message: "请输入年龄", trigger: "blur"}],
};
const props = defineProps({
  showAction: {
    type: Boolean,
    default: false,
  },
});

const wjdata = ref({
  wj1Ids: '1,3,5',
  wj2Ids: '12,13',
  wj3Ids: '20,22,18,24',
});

// onMounted(() => {
//   console.log('传入参数：', props.tysObject);
//   form.value.patientName = props.tysObject.patientName;
//   form.value.phone = props.tysObject.phoneMobile;
//   form.value.tysId = props.tysObject.id;
// });

const cancelSave = () => {
  router.replace("/keyan/patient");
};

function backList() {
  router.replace("/keyan/patient");
}

function beginEdit() {
  isBeginEdit.value = true;
}

function cancelEdit() {
  isBeginEdit.value = false;
}

function saveEdit() {
  updatePatient(form.value).then((response) => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("更新数据成功");
      isBeginEdit.value = false;
    } else {
      proxy.$modal.error(response.msg);
    }
  });
}

function saveZlbzwEdit(data) {
  // 保留肿瘤标志物信息
  updatePatientZlbzw(data).then((response) => {
    if (response.code === 200) {
      proxy.$modal.msgSuccess("更新数据成功");
      isBeginEdit.value = false;
    } else {
      proxy.$modal.error(response.msg);
    }
  });
}

onMounted(() => {
  // console.log('页面参数：', route.query);
  wjdata.value = {};
  form.value = {};

  patientId.value = route.query.patientId;
  getPatient(patientId.value).then((response) => {
    if (response.code === 200) {
      form.value = response.data;
      wjdata.value.wj1Ids = response.data.wj1Ids;
      wjdata.value.wj2Ids = response.data.wj2Ids;
      wjdata.value.wj3Ids = response.data.wj3Ids;
    } else {
      proxy.$modal.msgError(response.msg);
    }
  });
});

</script>
<template>
  <div class="app-container">
    <div style="background: #fff; border-radius: 5px; margin-bottom: 0;padding: 10px;">
      <el-row justify="space-between">
        <el-col :lg="2" :md="3" :sm="4">
          <el-button type="primary" @click="backList" icon="back">返回列表</el-button>
        </el-col>
        <el-col :lg="8" :md="12" :sm="24" style="display: flex;justify-content: end;">
          <el-button v-show="!isBeginEdit" @click="beginEdit" icon="editPen">编辑信息</el-button>
          <el-button v-show="isBeginEdit" @click="cancelEdit" icon="close">取消编辑</el-button>
          <el-button v-show="isBeginEdit" type="primary" @click="saveEdit" icon="select">保存信息</el-button>
        </el-col>
      </el-row>
      <el-form :disabled="!isBeginEdit" :inline="true" :model="form" ref="ruleFormRef" :rules="rules"
               label-width="160"
               label-position="right">
        <el-input v-model="form.tysId" style="display: none"/>
        <el-divider content-position="left">基础信息</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="参与者姓名" prop="patientName">
              <el-input v-model="form.patientName" placeholder="请输入参与者姓名" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" clearable/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="性别" prop="wxysdj">
              <el-select v-model="form.wxysdj" placeholder="性别" clearable style="width: 190px">
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" placeholder="年龄" clearable>
                <template #append>岁</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身高">
              <el-input v-model="form.height" placeholder="身高" clearable>
                <template #append>cm</template>
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="体重">
              <el-input v-model="form.weight" placeholder="体重" clearable>
                <template #append>kg</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="基础疾病">
              <el-select v-model="form.jcjb" placeholder="请选择基础疾病" clearable style="width: 190px">
                <el-option v-for="dict in ky_jcjb" :key="dict.value" :label="dict.label"
                           :value="dict.value"></el-option>
              </el-select>
            </el-form-item
            >
          </el-col>

          <el-col :span="6">
            <el-form-item label="吸烟史">
              <el-select v-model="form.xys" placeholder="吸烟史" clearable style="width: 190px">
                <el-option v-for="dict in ky_xys" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="饮酒情况">
              <el-select v-model="form.yjqk" placeholder="饮酒情况" clearable style="width: 190px">
                <el-option v-for="dict in ky_yjqk" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="红肉或加工类饮食">
              <el-select v-model="form.hrjgl" placeholder="红肉或加工类饮食" clearable style="width: 190px">
                <el-option v-for="dict in ky_hrjgl" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="有无一级亲属患有结直肠癌">
              <el-select v-model="form.jzcaqsYw" placeholder="有无一级亲属患有结直肠癌" clearable style="width: 190px">
                <el-option v-for="dict in ky_yw" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="与参与者关系">
              <el-input v-model="form.jzcaqsGx" placeholder="请输入与参与者关系" clearable/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="最近是否做过肠镜检查">
              <el-select v-model="form.cjjcSf" placeholder="最近是否做过肠镜检查" clearable style="width: 190px">
                <el-option v-for="dict in ky_sf" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="肠镜检查时间">
              <el-date-picker style="width: 190px" v-model="form.cjjcSj" value-format="YYYY-MM-DD" type="date"
                              placeholder="肠镜检查时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="肠镜检查结果" style=" width: 100%;padding-right: 20px;">
              <el-input v-model="form.cjjcJg" placeholder="肠镜检查结果" clearable
                        style="min-width: 200px;width: 100%;"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="治疗建议">
              <el-input
                  v-model="form.cjJg"
                  style="width: 500px"
                  :rows="2"
                  type="textarea"
                  placeholder="治疗建议"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>


    </div>

    <div
        style="
        background: #fff;
        border-radius: 5px;
        padding: 0 20px;
        max-height: 50vh;
        min-height: 50vh;
        overflow-y: auto;
      "
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="回访记录" name="1">
          <!--          <ReturnVisit />-->
          <Followup :patient-id="patientId"/>
        </el-tab-pane>
        <el-tab-pane label="肿瘤标志物检查信息" name="2">
          <TumorMarker :patient-object="form" @save-edit-zlbzw="saveZlbzwEdit"/>
        </el-tab-pane>
        <el-tab-pane label="评估量表" name="3">
          <Question :data="wjdata" :is-edit="false" style="background: #fff;"/>
        </el-tab-pane>
        <el-tab-pane label="人物关系" name="4">
          <Releationship :patient-id="patientId"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  background: #f5f5f5;
}
</style>
